<template>
	<view class="popup-head">
		<view class="popup-title" :class="{'popup-title-left': leftTitle}">{{ title }}</view>
		<view class="popup-close" hover-class="btn-hover" @click="$emit('close')">
			<u-icon name="close-circle-fill" color="#D8D8D8" size="40rpx"></u-icon>
		</view>
		<u-line color="#EEEEEE"></u-line>
	</view>
</template>

<script>
	export default {
		props: {
			title: String,
			leftTitle: Boolean
		},
		data() {
			return {
				
			}
		},
		created() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.popup-head {
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
		.popup-title {
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: $u-main-color;
		}
		.popup-title.popup-title-left {
			text-align: left;
			padding-left: 30rpx;
		}
		.popup-close {
			position: absolute;
			top: 0;
			right: 0;
			width: 88rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>